import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import s from './style.module.css';

function Percent({ className, label, total, num }) {
	const percent = (295.31 * num) / total;

	return (
		<div className={cn(className, s.percent)}>
			<div className={s.inner}>
				<svg viewBox="0 0 100 100">
					<path
						className={s.background}
						d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94"
						strokeLinecap="round"
						strokeWidth="6"
						fillOpacity="0"
					></path>
					<path
						className={s.foreground}
						d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94"
						strokeLinecap="round"
						strokeWidth="6"
						fillOpacity="0"
						strokeDasharray={`${percent || 0}px, 295.31px`}
					></path>
				</svg>
				<span className={s.percentNum} title={num}>
					{num}
				</span>
			</div>
			<div className={s.label}>{label}</div>
		</div>
	);
}

Percent.propTypes = {
	className: PropTypes.string,
	label: PropTypes.string.isRequired,
	total: PropTypes.number.isRequired,
	num: PropTypes.number.isRequired,
};
Percent.defaultProps = {
	className: s.percent,
};

export default Percent;
